import { useEffect } from 'react';
import ErrorBoundary from './component/error-boundary';
import Routers from './Router';
import './App.css';

// console.log('Router', Routers)
// 路由
// import { BrowserRouter as Router, Switch, Route, Link }
// from 'react-router-dom'
// import { HashRouter } from 'react-router-dom'

// ts 语法
// import FirstTs from './component/tsTest/firstTs'

/**
 * 自定义元素，组件
 * 组件名称必须以大写字母开头
 */
// function Welcome(props){
//   return <h1>hello, {props.name}</h1>
// }

function App() {
  useEffect(() => {
    // 获取原始版本号
    const headDom = document.getElementsByTagName('head')[0];
    const metas = headDom.getElementsByTagName('meta');
    // console.log(headDom, 'metas', metas)
    Array.from({ length: metas.length }, (_, i) => {
      // 获取版本号写入 sessionStorage 中
      if (metas[i].getAttribute('name') === 'version') {
        // console.log(metas[i].getAttribute('content'))
        sessionStorage.setItem('version', metas[i].getAttribute('content'));
      }
    });
  }, []);

  return (
    <div className='App'>
      <ErrorBoundary>
        <header className='App-header'>
          {/* <img src={logo} className="App-logo" alt="logo" /> */}
          {/* 标签用于描述文档或文档某个部分的细节 */}
          {/* <details>
          <summary>React</summary>
          <Welcome name='自定义组件' />
        </details> */}
          <Routers />
          {/* ts语法使用 */}
          {/* <FirstTs /> */}
        </header>
      </ErrorBoundary>
    </div>
  );
}

export default App;
